<template>
    <view class="fixed-layer" v-if="show" @touchmove.stop.prevent="" :disable-scroll="true">
        <view class="dialog-activity">
            <view class="manhe">
                <swiper class="swiper" :style="{ height: `700rpx` }" :previous-margin="'100rpx'" :next-margin="'100rpx'"
                    circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="200">
                    <swiper-item v-for="(item, index) in list" :key="index" @click="adClick(item.url)">
                        <view class="swiper-item">
                            <image class="image" :src="item.img" :lazy-load="true" ></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view class="header">
                <text class="cuIcon cuIcon-roundclose" @click="closeLayer"></text>
            </view>
        </view>
    </view>
</template>

<script setup>

const { proxy } = getCurrentInstance()
const props = defineProps({
    list: {
        type: [Array],
        default: [],
    }
})
const data = reactive({
    show: true,
    currDate: ''
})
const {show} = toRefs(data)
onMounted(() => {
    initLayer()
});


function initLayer() {
    if(!props.list || props.list.length == 0) {
        data.show = false
    } else {
        data.show = true
    }
}
function closeLayer() {
    data.show = false
    uni.setStorageSync('home_layer', data.currDate)
}

function adClick(url) {
    proxy.$go(url)
}
</script>

<style scoped lang="scss">
.fixed-layer {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background: rgba($color: #000000, $alpha: 0.6);

    .dialog-activity {
        height: 100%;
        width: 100%;
        // padding: 0 90rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        justify-items: center;

        .ac-image {
            width: 100%;
        }

        .header {
            margin-top: 40rpx;
            width: 100%;
            position: relative;
            text-align: center;

            .cuIcon-roundclose {
                font-size: 60rpx;
                color: #fff;
            }
        }
    }
}

.manhe {
    width: 100%;
}

.swiper,
.swiper-item,
.image {
    width: 100%;
    height: 100%;
}

.swiper-item {
    padding: 15rpx;
}
</style>
